<template>
  <div class="video-container" :style="{ width: width, height: height }">
    <video ref="videoPlayer" class="video-js"></video>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue'
  import videoJs from 'video.js'
  import 'video.js/dist/video-js.css'
  const props = withDefaults(
    defineProps<{
      src: string
      width?: string
      height?: string
    }>(),
    {
      src: ''
    }
  )
  const videoPlayer = ref(null)
  const player = ref<any>(null)
  const options = reactive({
    controls: true,
    fluid: true,
    sources: [
      {
        src: props.src,
        //视频类型
        type: 'video/mp4'
      }
    ]
  })
  onMounted(() => {
    player.value = videoJs(videoPlayer.value, options, function onPlayerReady() {
      console.log('onPlayerReady', this)
    })
  })
  onUnmounted(() => {
    if (player.value()) {
      player.value.dispose()
    }
  })
</script>
<style lang="scss" scoped></style>
